<template>
  <div class="container">
    <div class="header">
      <div class="menu-circle"></div>
        <div class="header-profile">
        <div class="notification">
          <span class="notification-number">3</span>
          <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
          </svg>
        </div>
        <svg viewBox="0 0 512 512" fill="currentColor">
          <path d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z" />
        </svg>
        <img class="profile-img" src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
      </div>
        <button class="right-side-button" @click="rightSide = !rightSide">
          <svg
            viewBox="0 0 24 24"
            width="24"
            height="24"
            stroke="currentColor"
            stroke-width="2"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="css-i6dzq1"
          >
            <path
              d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
            ></path>
          </svg>
        </button>
      </div>
      <div class="line"></div>

    <div class="container-body">
      <div class="right-side" :class="{ active: rightSide }">
        <div
          v-for="(item, index) in users"
          :key="index"
          class="user"
          :class="{ active: selectedUserIndex === index }"
          @click="selectUserHandle(index)"
        >
          <img src="@/assets/gljj.png" class="user-img" />
          <div class="username">{{ item.name }}</div>
        </div>
      </div>
      <div class="chat-area" :class="{ empty: !chatAreaEmpty }">
        <template v-if="chatAreaEmpty">
          <div class="chat-area-header">dsfaaaa</div>
          <div class="chat-area-main">
            <div
              ref="chatItem"
              class="chat-msg"
              :class="{ owner: item.owner }"
              v-for="(item, index) in messages"
              :key="index"
            >
              <div class="chat-msg-profile">
                <img src="@/assets/gljj.png" alt="" class="chat-msg-img" />
                <div class="chat-msg-date">{{ item.date }}</div>
              </div>

              <div class="chat-msg-content">
                <div class="chat-msg-text">{{ item.text }}</div>
              </div>
            </div>
          </div>

          <div class="chat-area-footer">
            <input
              type="text"
              placeholder="Type something here..."
              @keyup.enter="enterHandle"
              v-model="message"
            />
          </div>
        </template>
      </div>
    </div>

    <div
      class="overlay"
      @click="rightSide = false"
      :class="{ active: rightSide }"
    ></div>
  </div>
</template>

<script>
import { socket } from '@/socket'
export default {
  name: 'IndexView',
  data() {
    return {
      rightSide: false,
      selectedUserIndex: -1,
      user: JSON.parse(localStorage.getItem('user')),
      rooms: [{ id: 1 }, { id: 1 }],
      messages: [],
      message: '',
    }
  },
  mounted() {
    //await this.getData()
    //await this.scrollToIndexItem('chatItem', this.messages.length - 1)
    socket.connect()

    // socket.on('chat message', msg => {
    //   this.messages.push({
    //     date: 'Message seen 3.16pm',
    //     text: msg,
    //     owner: false,
    //   })
    //   this.scrollToIndexItem('chatItem', this.messages.length - 1)
    // })

    socket.on('private message', ({ from, text }) => {
      console.log(`from: ${from}, text: ${text}`)
      this.messages.push({
        date: 'Message seen 3.16pm',
        text,
        owner: false,
      })
      this.scrollToIndexItem('chatItem', this.messages.length - 1)
    })
  },
  computed: {
    chatAreaEmpty() {
      return this.selectedUserIndex > -1
    },
    users() {
      const users = [
        {
          id: '65715fcaa9bf7c89f65563a2',
          name: 'user01',
          avatar: '@/assets/gljj.png',
        },
        {
          id: '65715fcaa9bf7c89f65563a4',
          name: 'user02',
          avatar: '@/assets/gljj.png',
        },
        {
                    id: '657198c20dc2f46e003102c0',
          name: 'user03',
          avatar: '@/assets/gljj.png',
        },
      ]
      return users.filter(user => user.id !== this.user.id)
    },
  },
  methods: {
    async selectUserHandle(index) {
      console.log('index', index)
      this.selectedUserIndex = index
      const messages = await this.getMessages()
      this.messages = [...messages]
      if (index === 2) {
        this.messages = []
      }
      await this.scrollToIndexItem('chatItem', this.messages.length - 1)
      socket.emit('join room', { room: this.user.id })
    },
    async getData() {
      const messages = await this.getMessages()
      this.messages = [...messages]
    },
    getMessages() {
      return new Promise(resolve => {
        const messages = []
        resolve(messages)
      })
    },
    async scrollToIndexItem(itemName, itemIndex) {
      await this.$nextTick()
      this.$refs[itemName][itemIndex].scrollIntoView({ behavior: 'smooth' })
    },
    enterHandle() {
      this.messages.push({
        date: 'Message seen 3.16pm',
        text: this.message,
        owner: true,
      })
      this.scrollToIndexItem('chatItem', this.messages.length - 1)
      socket.emit('private message', {
        from: this.user.id,
        to: this.users[this.selectedUserIndex].id,
        text: this.message,
      })
      this.message = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  max-width: 1600px;
  height: calc(100vh - 4em);
  margin: 2em 4em;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--theme-bg-color);
  box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1);

  @media screen and (max-width: 1210px) {
    height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .header {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 58px;
    padding: 0 30px;
    white-space: nowrap;

    .menu-circle {
      width: 15px;
      height: 15px;
      background-color: #f96057;
      border-radius: 50%;
      box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65;
      margin-right: 195px;
      flex-shrink: 0;
     }

     .header-profile {
 display: flex;
 align-items: center;
 padding: 0 16px 0 40px;
 margin-left: auto;
 flex-shrink: 0;
 svg {
  width: 22px;
  color: #f9fafb;
  flex-shrink: 0;
 }
}

.notification {
 position: relative;
 &-number {
  position: absolute;
  background-color: #3a6df0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  right: -6px;
  top: -6px;
 }
 & + svg {
  margin-left: 22px;
  @media screen and (max-width: 945px) {
   display: none;
  }
 }
}

.profile-img {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid #f9fafb;
 margin-left: 22px;
}

    .right-side-button {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      border: 0;
      width: 52px;
      background-color: transparent;
      color: #fff;
      display: none;
      cursor: pointer;

      &:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        background-color: #3a6df0;
        top: 13px;
        right: 12px;
      }
      svg {
        width: 22px;
      }
      @media screen and (max-width: 1210px) {
        display: block;
      }
    }
  }

  .line {
  position: relative;
  height: 1px;
  // background: rgba(255, 255, 255, 0.1);
  background: hsl(272, 100%, 9%);

  &::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 180px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
    animation: move 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  }
}

@keyframes move {
    0% {
        left: 0
    }  
    50% {
        left: calc(100% - 180px)
    }
    100% {
        left: 0
    }
}
  .container-body {
    flex: 1;
    display: flex;
    overflow: hidden;

    .right-side {
      width: 280px;
      flex-shrink: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;

      @media screen and (max-width: 1210px) {
        position: fixed;
        left: 0;
        top: 0;
        transition: 0.3s;
        height: 100%;
        transform: translateX(-280px);
        z-index: 4;
        background: linear-gradient(to bottom, #ffffff, #edb0fd);
        padding-top: 18px;
        padding-bottom: 18px;

        &.active {
          transform: translatex(0);
        }
      }

      .user {
        display: flex;
        align-items: center;
        cursor: pointer;
        border-left: 4px solid;
        border-left-color: transparent;
        padding: 20px;

        .user-img {
          border-radius: 50%;
          width: 45px;
          height: 45px;
          margin-right: 15px;
          margin-left: 20px;
          object-fit: cover;
          object-position: center;
        }

        .username {
          height: 100%;
          font-size: 15px;
          display: flex;
          flex: 1;
          align-items: center;
        }

        &:hover {
          background-color: var(--msg-hover-bg);
        }
        &.active {
          background: var(--active-conversation-bg);
          border-left-color: var(--theme-color);
        }
      }
    }

    .chat-area {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      background-color: var(--theme-bg-color);

      &.empty {
        background-image: url('@/assets/empty.svg');
        background-size: cover;
        background-position: center;
      }

      .chat-area-header {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: var(--theme-bg-color);
      }

      .chat-area-main {
        padding: 20px;
        flex-grow: 1;
        overflow: auto;

        .chat-msg {
          display: flex;
          padding: 0 20px 45px;

          .chat-msg-profile {
            flex-shrink: 0;
            margin-top: auto;
            margin-bottom: -20px;
            position: relative;

            .chat-msg-img {
              height: 40px;
              width: 40px;
              border-radius: 50%;
              -o-object-fit: cover;
              object-fit: cover;
            }

            .chat-msg-date {
              position: absolute;
              left: calc(100% + 12px);
              bottom: 0;
              font-size: 12px;
              font-weight: 600;
              color: var(--msg-date);
              white-space: nowrap;
            }
          }

          .chat-msg-content {
            margin-left: 12px;
            max-width: 70%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .chat-msg-text {
              background-color: var(--chat-text-bg);
              padding: 15px;
              border-radius: 20px 20px 20px 0;
              line-height: 1.5;
              font-size: 14px;
              font-weight: 500;
              word-break: break-word;
            }
          }

          &.owner {
            flex-direction: row-reverse;

            .chat-msg-profile {
              .chat-msg-date {
                left: auto;
                right: calc(100% + 12px);
              }
            }

            .chat-msg-content {
              margin-left: 0;
              margin-right: 12px;
              align-items: flex-end;

              .chat-msg-text {
                background-color: var(--theme-color);
                color: #fff;
                border-radius: 20px 20px 0 20px;
              }
            }
          }
        }
      }

      .chat-area-footer {
        display: flex;
        width: 100%;
        padding: 10px 20px;
        align-items: center;
        border-top: 1px solid var(--border-color);
        background-color: var(--theme-bg-color);

        input {
          border: none;
          color: var(--body-color);
          background-color: var(--input-bg);
          padding: 12px;
          border-radius: 6px;
          font-size: 15px;
          margin: 0 12px;
          width: 100%;
          &::placeholder {
            color: var(--input-chat-color);
          }
        }
      }
    }
  }
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(#24273b, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;

  @media screen and (max-width: 1210px) {
    &.active {
      z-index: 3;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }
  }
}
</style>
